<template>
    <div>
        <div class="top">
            <div class="logo">LOGO</div>
            <div style="flex: 1;"></div>
            <div class="title">登录</div>
            <div class="title titleLast">注册</div>
        </div>

        <div class="middle">
            <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="loginForm" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" class="input"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" class="input"></el-input>
                </el-form-item>
                <el-form-item prop="remember">
                    <el-checkbox v-model="ruleForm.remember">记住我</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { login } from '@/api/login';
import { getToken } from '@/api/token';
export default {
    data(){
        return{
            ruleForm:{
                username: '',
                password: '',
                remember: false,
            },
            rules: {
                username:[
                    { required: true, message: '请输入用户名', trigger: 'change' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        submit(){
            this.$refs.loginForm.validate((valid) => {
                if(valid){
                    let data = 'username=' + this.ruleForm.username + '&password=' + this.ruleForm.password;
                    login(data).then((res) => {
                        if(res){
                            localStorage.setItem('test', 1);
                            // this.$message.success('登录成功');
                            // console.log(res.data);
                            if(res.data == '请先登录'){
                                this.$message.success('请先登录！');
                            }
                            else{
                                console.log(res.data);
                                localStorage.setItem('tokenValue', JSON.stringify(res.data.tokenValue));
                                localStorage.setItem('isLogin', res.data.isLogin);
                                localStorage.setItem('loginId', res.data.loginId);
                                localStorage.setItem('tokenName', res.data.tokenName);
                               

                                console.log(localStorage.getItem('tokenValue'));
                                console.log(localStorage.getItem('isLogin'));
                                console.log(localStorage.getItem('loginId'));
                                console.log(localStorage.getItem('tokenName'));
                                this.$router.push({
                                    path: '/index',
                                });
                            }
                            
                        }
                    })
                }
                else{
                    this.$message.warning('注意必填项');
                    return ;
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.top{
    display: flex;
    justify-content: space-around; 
    align-items: center;
    font-weight: bold;
    width: 100%;
    background-color: #3d40e5;
    margin: 0 auto;
    // height: 60px;
    color: #fff;
}

.top .logo{
    padding: 20px 30px;
    margin: 0 60px;
    margin-left: 100px;
}

.top .title{
    padding: 20px 50px;
}

.top .titleLast{
    margin-right: 100px;
}
.middle{
    width: 500px;
    background-color: rgb(240, 240, 240);
    margin: 0 auto;
    padding: 50px;
}
.middle .input{
    width: 70%;
    // padding: -0px;
}

</style>